<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>邮箱输入提示功能</title>
		<style>
			*{
				list-style: none;
				margin: 0;
				padding: 0;
			}
			ul{
				display: none;
			}
			li{
				border: solid 1px darkgray;
				width: 235px;
				height: 23px;
				line-height: 23px;
				color: darkgray;
				font-size: 12px;
			}
			div{
				margin: 20px;
			}
			input{
				width: 233px;
				height: 23px;
			}
		</style>
	</head>

	<body>
		<div class="wrapper">
			<input id="email-input" type="text">
			<ul id="email-sug-wrapper" class="email-sug">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script>
			var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];
			var email=document.getElementById("email-input");
			var sug=document.getElementById('email-sug-wrapper');
			var lis=document.getElementsByTagName("li");
			email.onkeyup=function(){
				var str='';
				var value=email.value;
				value=value.trim();
				if(value==null||value==''){
					sug.style.display='none';
				}else{
					
					sug.style.display='block';
					value=value+"@";
					for(var i=0;i<postfixList.length;i++){
						lis[i].innerHTML=value+postfixList[i];
					}
				}
				
				
			}
		</script>
	</body>

</html>